<template>
  <div class="jsbos-common-layout taskMsgReceives">
    <div class="jsbos-common-layout-center">
      <el-row class="jsbos-common-search-box" :gutter="18">
        <el-form @submit.native.prevent>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input
                v-model="listQuery.keyword"
                placeholder="关键参数、业务系统、发送配置、消息编号"
                clearable
                @keyup.enter.native="search()"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发送渠道">
              <el-select
                v-model="query.channelType"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="(item, index) in channelTypeOptions"
                  :key="index"
                  :label="item.fullName"
                  :value="item.enCode"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="接收人">
              <user-select
                v-model="query.sysUserIds"
                placeholder="请选择"
                clearable
                :multiple="true"
              >
              </user-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="search()"
                >查询</el-button
              >
              <el-button icon="el-icon-refresh-right" @click="reset()"
                >重置</el-button
              >
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="jsbos-common-layout-main jsbos-flex-main">
        <div class="jsbos-common-head">
          <div>
            <!-- <el-button
              type="primary"
              icon="el-icon-plus"
              @click="addOrUpdateHandle()"
              >新增
            </el-button> -->
            <el-button
              :disabled="multiple || !(activeName == '2_0')"
              type="danger"
              size="small"
              plain
              @click="handleDel('1')"
              icon="el-icon-close"
              >忽略
            </el-button>
            <el-button
              :disabled="multiple || !(activeName == '2_1')"
              type="danger"
              size="small"
              plain
              @click="handleDel('0')"
              >取消忽略
            </el-button>
          </div>
          <div class="jsbos-common-head-right">
            <el-tooltip effect="dark" content="刷新" placement="top">
              <el-link
                icon="icon-ym icon-ym-Refresh JSBOS-common-head-icon"
                :underline="false"
                @click="reset()"
              />
            </el-tooltip>
          </div>
        </div>
        <el-tabs v-model="activeName" type="card" @tab-click="handleTabClick">
          <el-tab-pane label="发送失败" name="2_0"> </el-tab-pane>
          <el-tab-pane label="发送成功" name="1_0"> </el-tab-pane>
          <el-tab-pane label="已忽略" name="2_1"> </el-tab-pane>
        </el-tabs>
        <jsbos-table
          v-loading="listLoading"
          :data="dataList"
          :border="true"
          style="margin-left: 5px"
          :isHeader="false"
          @sort-change="sortChange"
          has-c
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            prop="businessKey"
            label="关键参数"
            min-width="150"
            :align="'left'"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            prop="taskCode"
            label="业务系统"
            width="150"
            :align="'center'"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            prop="sendCode"
            label="发送配置"
            min-width="150"
            :align="'left'"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            prop="msgId"
            label="消息编号"
            width="150"
            :align="'left'"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="发送渠道"
            width="100"
            prop="channelType"
            algin="center"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ getChannelName(scope.row.channelType) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="sysUserId"
            label="接收人"
            width="100"
            :align="'left'"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            prop="receiveUserId"
            label="thirdID"
            width="200"
            :align="'left'"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            prop="enabledMark"
            label="状态"
            width="100"
            algin="'center'"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <el-tag
                :type="
                  scope.row.enabledMark == 0
                    ? 'warning'
                    : scope.row.enabledMark == 1
                    ? 'success'
                    : 'danger'
                "
                disable-transitions
              >
                {{ scope.row.enabledMark | dynamicText(enabledMarkOptions) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="sendTime"
            label="发送时间"
            width="180"
            :align="'center'"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            prop="sendUserId"
            label="发送人"
            width="100"
            :align="'center'"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            prop="description"
            label="备注描述"
            min-width="300"
            :align="'left'"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            prop="againTime"
            label="重发时间"
            width="180"
            :align="'center'"
          />
          <el-table-column
            prop="againUserId"
            label="重发人"
            width="100"
            :align="'center'"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            prop="creatorTime"
            label="创建时间"
            width="180"
            :align="'center'"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            prop="creatorUserId"
            label="创建人"
            width="100"
            :align="'center'"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="操作"
            :align="'center'"
            fixed="right"
            width="50"
          >
            <template slot-scope="scope">
              <!-- <el-button type="text" @click="handleDel('1', scope.row.id)"
                    >忽略
                  </el-button> -->
              <el-button type="text" @click="goDetail(scope.row.id)"
                >详情
              </el-button>
            </template>
          </el-table-column>
        </jsbos-table>
        <pagination
          :total="total"
          :page.sync="listQuery.currentPage"
          :limit.sync="listQuery.pageSize"
          @pagination="initData"
        />
      </div>
    </div>
    <JSBOS-Form v-if="formVisible" ref="JSBOSForm" @refresh="refresh" />
    <Detail
      v-if="detailVisible"
      ref="Detail"
      @refresh="detailVisible = false"
    />
  </div>
</template>

<script>
import { getList, Delete } from "@/views/message/api/mcTaskMsgReceive";
import JSBOSForm from "./Form";
import Detail from "./Detail";

export default {
  name: "mcTaskMsgReceive",
  components: { JSBOSForm, Detail },
  data() {
    return {
      activeName: "2_0",
      detailVisible: false,
      query: {
        // isRead: 1,
        messageId: undefined,
        channelType: undefined,
        receiveUserId: undefined,
        enabledMark: undefined,
        deleteMark: undefined,
      },
      dataList: [],
      listLoading: true,
      // 非多个禁用
      multiple: true,
      // 选中数组
      multipleSelection: [],
      // 选中ids数组
      ids: [],
      total: 0,
      listQuery: {
        keyword: undefined,
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "creatorTime",
      },
      formVisible: false,
      channelTypeOptions: [],
      enabledMarkOptions: [
        { fullName: "发送失败", id: "2" },
        { fullName: "发送成功", id: "1" },
        { fullName: "待下发", id: "0" },
      ],
      enabledMarkProps: {
        label: "fullName",
        value: "id",
      },
      isReadOptions: [
        { fullName: "是", id: "1" },
        { fullName: "否", id: "0" },
      ],
      isReadProps: {
        label: "fullName",
        value: "id",
      },
    };
  },
  computed: {
    menuId() {
      return this.$route.meta.modelId || "";
    },
  },
  created() {
    this.initData();
    this.getMessageTypeOptions();
  },
  methods: {
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.multipleSelection = selection;
      this.ids = selection.map((item) => item.id);
      this.multiple = !selection.length;
    },
    // 渠道名
    getChannelName(e) {
      for (var i = 0; i < this.channelTypeOptions.length; i++) {
        if (this.channelTypeOptions[i].enCode == e) {
          return this.channelTypeOptions[i].fullName;
        }
      }
    },
    getMessageTypeOptions() {
      this.$store
        .dispatch("base/getDictionaryData", {
          encode: "msgSendType",
        })
        .then((res) => {
          this.channelTypeOptions = res;
        });
    },
    goDetail(id) {
      this.detailVisible = true;
      this.$nextTick(() => {
        this.$refs.Detail.init(id);
      });
    },
    sortChange({ column, prop, order }) {
      this.listQuery.sort = order == "ascending" ? "asc" : "desc";
      this.listQuery.sidx = !order ? "" : prop;
      this.initData();
    },
    initData() {
      const activeId = this.activeName;
      const _enabled = activeId.split("_")[0];
      const _mark = activeId.split("_")[1];
      this.query.enabledMark = _enabled;
      this.query.deleteMark = _mark;
      this.listLoading = true;
      let _query = {
        ...this.listQuery,
        ...this.query,
        menuId: this.menuId,
      };
      getList(_query)
        .then((res) => {
          var _list = [];
          for (let i = 0; i < res.data.list.length; i++) {
            let _data = res.data.list[i];
            _list.push(_data);
          }
          this.dataList = _list;
          this.total = res.data.pagination.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    handleTabClick() {
      this.initData();
    },
    handleDel(mark, id) {
      if (!mark) {
        this.$message({
          message: "无效参数",
          type: "warning",
          duration: 1000,
        });
        return;
      }
      const _ids = id || this.ids;
      this.$confirm("确定此操作吗?", "提示", {
        type: "warning",
      })
        .then(() => {
          Delete(mark, _ids).then((res) => {
            this.$message({
              type: "success",
              message: res.msg,
              onClose: () => {
                this.initData();
              },
            });
          });
        })
        .catch(() => {});
    },
    addOrUpdateHandle(id, isDetail) {
      this.formVisible = true;
      this.$nextTick(() => {
        this.$refs.JSBOSForm.init(id, isDetail);
      });
    },
    search() {
      this.initData();
    },
    refresh(isInitData) {
      this.formVisible = false;
      if (isInitData) this.initData();
    },
    reset() {
      this.resetQuery();
      this.resetListQuery();
      this.initData();
    },
    resetQuery() {
      for (let key in this.query) {
        this.query[key] = undefined;
      }
    },
    resetListQuery() {
      this.listQuery = {
        keyword: "",
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "creatorTime",
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.taskMsgReceives {
  common-layout-main {
    padding: 0;
  }
  .receiveTabs {
    height: 100%;
  }
  .line1 {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
  }
  >>> .el-tabs__content {
    height: calc(100% - 40px);
    padding: 0;
    .el-tab-pane {
      height: calc(100% - 110px);
      overflow: hidden;
    }
  }
}
</style>
